<template>
  <div>
    <div class="轮播图" style="background-color:#7e7e9f">
      <el-carousel height="60px">
        <el-carousel-item v-for="item in data.noticeData" :key="item">
          <h3 class="small justify-center" text="2xl" style="padding-left:20px"><el-icon><ChatLineSquare /></el-icon>系统公告：{{ item.content }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in data.forumData" :key="item" >
          <img :src="item.img" alt="" @click="handleToForum('/front/forumdetail?id=' + item.id)" style="width:640px; height:400px; margin:20px 0;" >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div   style="width:80%; margin:20px auto">
      <div style="display: flex">
        <div style=" line-height:30px; height:30px; border-left:5px solid #2caf2c; font-size:25px;
            font-weight:bold; padding-left:5px; margin:20px 20px">论坛空间</div>
        <div style="display:flex; justify-content: flex-end; flex:1; font-size:15px; margin:auto 20px;"><a href="/front/frontforum">更多</a></div>
      </div>

      <div style="display: flex; grid-gap: 20px; background-color:#d8e3db; margin-top:5px;" v-for="item in data.forumData" :key="item">
        <div style="flex: 1;">
          <img :src="item.img" alt="" @click="handleToForum('/front/forumdetail?id=' + item.id)" style="width:100%; height:200px; cursor: pointer"/>
        </div>
        <div style="flex: 3; ">
          <div style="font-size:20px; font-weight:bold; margin-bottom:3px; cursor: pointer"
            @click="handleToForum('/front/forumdetail?id=' + item.id)"
          >{{ item.title }}</div>
          <div style="display:flex; margin-top:5px;">
            <img :src="item.userAvatar" alt=""  style="width:20px; height:20px; border-radius:50%;"/>
            <div style="margin-left:5px">
                <span class="clickable-text" @click="handleUserClick(item.userId)">
                  {{ item.userName }}
                </span>
            </div>
            <div style="margin-left:5px; font-size:10px; color:#988888">{{item.time}}</div>
          </div>
          <div class="line4" style="margin-top:5px; text-align: justify;">{{ item.description }}</div>
        </div>
      </div>

    </div>
  </div>

</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
  noticeData:[],
  forumData:[],
  title:null,
  categoryId:null,
  userId: null,
})

const loadNotice = () => {
  request.get("/notice/selectAll").then(res => {
    if (res.code === '200') {
      data.noticeData = res.data;
      if ( data.noticeData && data.noticeData.length > 4) {
        data.noticeData = data.noticeData.slice(0, 4);
      }
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadNotice()

const loadForum = () => {
  request.get("/written/selectByStatus2").then(res => {
    if (res.code === '200') {
      data.forumData = res.data
      if ( data.forumData && data.forumData.length > 4) {
        data.forumData = data.forumData.slice(0, 4);
      }
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadForum()

const handleUserClick = (row) => {
  const userId = String(row)
  router.push({ path: `/front/otherperson/${userId}`})
}

const handleToForum = (url) => {
  setInterval(() => {
    location.href = url
  }, 500)
}
</script>

<style>
.line4 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;/*超出多少行省略*/
  overflow: hidden;
}
.clickable-text {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.clickable-text:hover {
  color: #3375b9;
}

</style>